<template>
    <div class="user">
        <el-row>
            <el-col :span="24">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>用户管理</el-breadcrumb-item>
                    <el-breadcrumb-item>用户列表</el-breadcrumb-item>
                    </el-breadcrumb>
            </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
              <el-input placeholder="请输入内容" class="search-input" v-model="query" @keydown.native.enter="inituserList">
                <el-button slot="append" icon="el-icon-search" @click="inituserList"></el-button>
            </el-input>
             <el-button type="success" plain @click="adddialogFormVisible=true">添加用户</el-button>
          </el-col>
        </el-row>
        <el-table
            class="margin"
            :data="userList"
            v-loading="loading"
            style="width: 100%">
            <el-table-column
                type="index"
                width="50">
                </el-table-column>
            <el-table-column
                prop="username"
                label="姓名"
                width="180">
            </el-table-column>
            <el-table-column
                prop="email"
                label="邮箱"
                width="180">
            </el-table-column>
            <el-table-column
                prop="mobile"
                label="电话">
            </el-table-column>
             <el-table-column label="用户状态">
                <template slot-scope="scope">
                    <el-switch
                    v-model="scope.row.mg_state" @change="changeuserState(scope.row)">
                    </el-switch>
                </template>
    </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    type="primary" plain icon="el-icon-edit" @click="showeditdialogFormVisible(scope.row)"></el-button>
                     <el-button
                    size="mini"
                    type="danger" plain icon="el-icon-delete" @click="deleteuser(scope.row)"></el-button>
                     <el-button
                    size="mini"
                    type="warning" plain icon="el-icon-check" @click="fenpeiusermsg(scope.row)"></el-button>
                </template>
    </el-table-column>
    </el-table>
    <div class="page">
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    </div>
    <!--弹出添加用户信息  -->
    <el-dialog title="添加用户信息" :visible.sync="adddialogFormVisible">
  <el-form :model="addform" label-width="80px" :rules='rules' ref="adduserForm">
    <el-form-item label="姓名" prop="username">
      <el-input v-model="addform.username" autocomplete="off"></el-input>
    </el-form-item>
     <el-form-item label="密码" prop="password">
      <el-input v-model="addform.password" autocomplete="off"></el-input>
    </el-form-item>
     <el-form-item label="邮箱" prop="email">
      <el-input v-model="addform.email" autocomplete="off"></el-input>
    </el-form-item>
     <el-form-item label="电话" prop="mobile">
      <el-input v-model="addform.mobile" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="adddialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="adduser('adduserForm')">确 定</el-button>
  </div>
</el-dialog>

<!-- 编辑用户信息对话框 -->
 <el-dialog title="修改用户信息" :visible.sync="editdialogFormVisible">
  <el-form :model="editform" label-width="80px" :rules='rules' ref="edituserForm">
    <el-form-item label="姓名" prop="username">
      <el-input v-model="editform.username" autocomplete="off" :disabled="true"></el-input>
    </el-form-item>
     <el-form-item label="邮箱" prop="email">
      <el-input v-model="editform.email" autocomplete="off"></el-input>
    </el-form-item>
     <el-form-item label="电话" prop="mobile">
      <el-input v-model="editform.mobile" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="editdialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="edituser('edituserForm')">确 定</el-button>
  </div>
</el-dialog>

<!-- 分配角色对话框 -->
    <el-dialog title="分配角色" :visible.sync="fenpeidialogFormVisible">
  <el-form :model="fenpeiform" label-width="120px">
    <el-form-item label="当前的用户" >
      <el-tag type="info">{{fenpeiform.username}}</el-tag>
    </el-form-item>
     <el-form-item label="请选择角色">
    <el-select v-model="roleId" placeholder="请选择角色">
      <el-option v-for="(item,index) in fenpeiuserList" :key="index" :label="item.roleName" :value="item.id"></el-option>
    </el-select>
  </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="fenpeidialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="fenpeiuser()">确 定</el-button>
  </div>
</el-dialog>

</div>
</template>
<script>
import {getuserList,getuserstate,getaddusermsg,getidusers,editusersubmit,deleteusemsg,fenpeiusesList,fenpeisuccess} from '@/api'
export default {
     data() {
        return {
          loading:true,
          userList: [],
          value1:true,
          total:0,
          pagesize:10,
          pagenum:1,
          query:'',
          adddialogFormVisible:false,
          fenpeidialogFormVisible:false,
          fenpeiuserList:[],
          fenpeiform:{

          },
          roleId:'',
          addform:{
              username:"",
              password:'',
              email:'',
              mobile:''
          },
          rules:{
              username:[{ required: true, message: '请输入用户名', trigger: 'blur' }],
              password:[{ required: true, message: '请输入密码', trigger: 'blur' }],
              email: [
                    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
                ],
              mobile:[{ required: true, message: '请输入电话', trigger: 'blur' }]
          },
          editdialogFormVisible:false,
          editform:{
               username:"",
              email:'',
              mobile:'',
              id:0
          }
        }
      },


      created() {
          this.inituserList()
      },
       methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pagesize=val
        this.inituserList()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pagenum=val
         this.inituserList()
      },
    //   获取用户列表信息
    inituserList(){
        this.loading=true
        getuserList({params:{query:this.query,pagenum:this.pagenum,pagesize:this.pagesize}}).then(res=>{
            this.userList=res.data.users
            this.total=res.data.total
            this.loading=false
        })
    },
    changeuserState(row){
        
        getuserstate({uid:row.id,type:row.mg_state}).then(res=>{
         
            if(res.meta.status==200){
                this.$message({
          message: '修改用户状态成功',
          type: 'success'
        });
            }
        })
    },
    adduser(userForm){
         this.$refs[userForm].validate((valid)=>{
                if(valid){
                    getaddusermsg(this.addform).then(res=>{
                        // console.log(res)
                        if(res.meta.status==201){
                            this.$message({
                                type:'success',
                                message:'创建用户成功'
                            })
                             this.adddialogFormVisible=false
                            this.inituserList()
                            this.addform={}
                        }else{
                            this.$message({
                                type:'warning',
                                message:res.meta.msg
                            })
                        }
                       
                    })
                }
            })
    },
    showeditdialogFormVisible(row){
        this.editdialogFormVisible=true
        getidusers(row.id).then(res=>{
            console.log(res)
            if(res.meta.status==200){
                this.editform.username=res.data.username
                this.editform.email=res.data.email
                this.editform.mobile=res.data.mobile
                this.editform.id=res.data.id

            }
        })

    },
    edituser(userForm){
        this.$refs[userForm].validate((valid)=>{
            if(valid){
                editusersubmit(this.editform).then(res=>{
                    console.log(res)
                    if(res.meta.status==200){
                        this.$message({
                            type:'success',
                            message:'修改成功'
                        })
                        this.editdialogFormVisible=false
                        this.inituserList()
                    }
                })
            }
        })
    },
    // 删除用户
    deleteuser(row){
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            deleteusemsg(row.id).then(res=>{
                if(res.meta.status==200){
                this.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                }
                this.inituserList()
            })
      
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      // 获取用户角色
    fenpeiusermsg(row){
        this.fenpeiform=row
        this.fenpeidialogFormVisible=true
        fenpeiusesList().then(res=>{
            // console.log(res)
            if(res.meta.status==200){
                this.fenpeiuserList=res.data
            }
        })
    },
    // 分配角色
    fenpeiuser(){
        if(!this.roleId){
            this.$message({
                type:'warning',
                message:"角色不能为空请选择"
            })
        }else{
        fenpeisuccess({id:this.fenpeiform.id,rid:this.roleId}).then(res=>{
                    // console.log(res)
                    if(res.meta.status==200){
                        this.$message({
                    type:'success',
                    message:'设置角色成功'
                })
                this.fenpeidialogFormVisible=false
            }else{
                this.$message({
                    type:"warning",
                    message:res.meta.msg
                })
            }
        })
        }
       
    }
    },
    
      
}

</script>
<style lang="scss" scoped>
.user {
    .margin{
        margin: 20px 0;
    }
  .search-input {
    width: 300px;
  }
  .page {
    padding: 5px 0;
    background-color: #D3DCE6;
  }
}
</style>
